<template>
    <div class="pagination-table clearfix">
        <div class="pagination-total-number fl">
            {{'共'+ pagVal.totalNumber +'条'}}
        </div>
        <div class="pagination-each-number fl">
            <div class="pagination-each-show" @click.stop="showEachPage" :class="{'is-active':isShowEach}">
                {{ pagVal.eachPageNumber+'条'}}
            </div>
            <div class="pagination-each-lists" v-if="isShowEach">
                <ul>
                    <li v-for="(item, index) in eachPageNumberList"
                     :key="index" @click="changgeEach(item)" 
                     :class="{'active': pagVal.eachPageNumber===item,
                     'pagination-each-left':index === 0 || index ===3||index===6,
                     'pagination-each-right':index === 2 || index ===5||index===8,
                     'pagination-each-middle':index===3||index===4||index===5}"
                     >
                     {{item}}
                     </li>
                </ul>              
            </div>
        </div>
        <div class="pagination-current-page fl">
            <span>第</span>
            <span class="pagination-current-active">{{pagVal.currentPage}}</span>
            <span>/</span>
            <span>{{pagVal.totalPage}}</span>
            <span>页</span>
            </div>
        <div class="pagination-next-page fl">
        <span @click="changePage('pre')" :class="pagVal.currentPage <=1?'pagination-not-allowed' :''">
            &lt;
        </span>
        <span :class="{'pagination-input':isInputActive}">
           <input 
           type="text" min="1" 
           :value="pagVal.currentPage"
            @keydown.enter="checkKeyInfo" 
            @focus="addActive"
            @blur="checkKeyInfo" 
            oninput="value=value.replace(/[^123456789]+/g,'')">
        </span>
        <span 
        @click="changePage('next')" 
        :class="pagVal.currentPage>=pagVal.totalPage?'pagination-not-allowed' :''">
            &gt;
        </span>
        </div>
    </div>
</template>
<script>
export default {
  /* 
    currentPage 当前页
    totalPage 总页数
    totalNumber 总条数
    eachPageNumber 每页条数
    */
  name: "pagination",
  props: {
    pagVal: {
      type: Object,
      default: {
        // totalNumber: 100,
        // eachPageNumber: 10,
        // currentPage: 1,
        // totalPage: 4
      }
    }
  },
  data() {
    return {
      //每页条数显隐开关
      isShowEach: false,
      isInputActive:false,
      eachPageNumberList: [10, 15, 20, 30, 40, 50, 100, 150, 200]
    };
  },
  methods: {
    showEachPage() {
      let _this = this;
      let flag = true;
      if (_this.isShowEach) {
        _this.isShowEach = false;
        return;
      }
      _this.isShowEach = true;
      if (_this.isShowEach && flag) {
        document.addEventListener(
          "click",
          function(e) {
            flag = false;
            _this.isShowEach = false;
          },
          false
        );
      }
    },
    changgeEach(item) {
      this.pagVal.eachPageNumber = item;
    },
    addActive(){
      this.isInputActive = true
    },
    changePage(type) {
      let _this = this;
      let _thisPagVal = _this.pagVal;

      if (type === "pre" || type === "next") {
        type === "pre" ? _thisPagVal.currentPage-- : "";
        type === "next" ? _thisPagVal.currentPage++ : "";
      } else {
        _this.checkVal(type);
      }
    },
    //enter事件
    checkKeyInfo(event) {
      this.checkVal(event);
      this.isInputActive = false;
    },
    checkVal(event) {
      event = event || window.event;
      var tagVal = this.pagVal.totalPage;
      if (event.target.value > tagVal) {
        this.pagVal.currentPage = tagVal;
        event.target.value = tagVal;
      } else {
        this.pagVal.currentPage = event.target.value;
      }
    }
  },
};
</script>
<style lang="scss">
.pagination-table {
  user-select: none;
  .fl {
    float: left;
  }
  .pagination-total-number {
    height: 26px;
    line-height: 26px;
    margin-right: 20px;
  }
  .pagination-each-number {
    position: relative;
    margin-right: 16px;
    cursor: pointer;
    .pagination-each-show {
      width: 80px;
      height: 26px;
      line-height: 26px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(193, 196, 214, 1);
      text-align: center;
      &.is-active {
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(101, 117, 246, 1);
      }
    }
    .pagination-each-lists {
      position: absolute;
      width: 152px;
      height: 97px;
      margin-top: 7px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(193, 196, 214, 1);
      z-index: 9999;
      ul {
        list-style: none;
        width: 100%;
        height: 100%;
        li {
          width: 50px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
          float: left;
          &:hover {
            background: rgba(228, 239, 255, 1);
          }
        }
        .pagination-each-left {
          border-right: 1px dashed rgba(193, 196, 214, 1);
        }
        .pagination-each-right {
          border-left: 1px dashed rgba(193, 196, 214, 1);
        }
        .pagination-each-middle {
          border-top: 1px dashed rgba(193, 196, 214, 1);
          border-bottom: 1px dashed rgba(193, 196, 214, 1);
        }
        .active {
          background: rgba(101, 117, 246, 1);
          color: #fff;
        }
      }
    }
  }
  .pagination-current-page {
    height: 26px;
    line-height: 26px;
    margin-right: 16px;
    .pagination-current-active {
      color: #6575f6;
    }
  }
  .pagination-next-page {
    span:nth-child(1) {
      display: inline-block;
      width: 26px;
      height: 26px;
      line-height: 26px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px 0px 0px 4px;
      border: 1px solid rgba(193, 196, 214, 1);
      text-align: center;
      cursor: pointer;

      //   cursor: pointer;
    }
    span:nth-child(2) {
      display: inline-block;
      width: 48px;
      height: 26px;
      line-height: 26px;
      background: rgba(255, 255, 255, 1);
      text-align: center;
      border: 1px solid rgba(193, 196, 214, 1);
      border-left: none;
      vertical-align: top;
      overflow: hidden;
      &.pagination-input{
        border:1px solid rgba(101,117,246,1);
      }
      input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        text-align: center;
      }
    }
    span:nth-child(3) {
      display: inline-block;
      width: 26px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      background: rgba(255, 255, 255, 1);
      border-radius: 0 4px 4px 0;
      border: 1px solid rgba(193, 196, 214, 1);
      border-left: none;
      cursor: pointer;
    }
    .pagination-not-allowed {
      pointer-events: none;
      cursor: not-allowed;
      color: #c4cad7;
    }
  }
}
</style>
